Youngrok Pak
HTML / CSS 코딩 역시 프로그래밍이다. 무작정 코딩하다보면 유연하지 않은 구조, 중복들로 고생하게 된다. 다행히 CSS에는 class, cascading 등의 개념이 있어서 중복을 어느 정도 제거할 수 있다. 이런 점을 활용해서 HTML / CSS를 설계하는 원칙들을 정리해보았다.
아래의 원칙들은 옛날 것이다. 지금은 다음의 한 문장으로 요약할 수 있다.
Twitter Bootstrap을 써라.
HTML부터 설계하라 (naked html)#
접근성 스크린리더
sematic한 태그
로직 상의 이유로 id 속성이 필요한 경우 선택자로 class 대신 id를 사용하라.#
<div class="alertDialog" id="alertDialog" style="">
</div>
unique한 class 명 -> bad smell
class 이름은 자기 설명적(self-descriptive)으로 짓는 것을 우선적으로 생각하라.#
중복을 제거하라.#
텍스트에 일관된 line-height와 margin, padding, font를 적용하라.#
vertical-align bottom baseline middle
버튼, 인라인팝업, 박스, 메뉴, 링크 등의 디자인을 일관성 있게 하라.#
태그의 의미를 확장하기보다 div, span을 쓰고 class를 붙여라.#
dl dt dd
ul li
유효성 검사를 활용하되, 집착하지 말라.#
유 효성 검사에서는 HTML 문서가 표준 규격에 맞는지를 검사해준다. 다만, 그 규격을 지키지 않아도 제대로 렌더링되고 동작하는 경우가 많기 때문에 완벽하게 유효성 검사를 통과할 필요는 없다. 하지만 태그 짝이 맞는지, alt 속성이 빠지지 않았는지 등을 꼼꼼하게 체크해주는 것은 유용하다. 사실 유효성 검사를 통과하는 것이 어려운 일도 아니기 때문에 특별한 일이 없다면 지키도록 하자. 파이어폭스에 개발자 도구가 설치되어 있다면 CTRL-SHIFT-A로 쉽게 검사할 수 있다.
IE를 어느 버전까지 지원할 것인지 결정하라.#
차라리 핵hack을 써라.#
IE6, 7에는 무수한 버그가 있지만 그 중에서도 가장 골치아픈 것은 margin, width, height에 관련된 버그다. 이것 때문에 레이아웃을 잡는 것이 상당히 힘들어진다. 이 경우 IE CSS Hack을 쓰는 방법이 있고, 또 버그를 피해가는 코딩을 할 수도 있다. CSS 개발자들이 핵은 필요한 경우에만 최소한으로 쓰는 게 좋다는 생각을 하는 경우가 많아서 보통은 버그를 피해가는 코딩을 선택한다. 이를테면, margin 계산이 잘못되는 경우 margin을 padding으로 대체하면 여러 브라우저에서 문제 없이 보일 수 있다. width의 경우도 IE6, 7에서는 width가 padding을 포함하지만 표준 호환 브라우저에서는 그렇지 않다. 그래서 padding을 쓰지 않고 text-indent 등을 활용하거나, 안에 엘리먼트를 하나 더 둬서 싸거나 하는 경우가 많다. 이렇게 하면 분명히 코딩량이 줄어든다.
하지만, 이것은 clean code의 중요한 원칙, 의도를 드러내라를 위반하는 것이다. CSS 역시 개발자 입장에서는 코드이고 코드는 늘 중복이 없어야 하고 개발자의 의도가 드러나야 한다. IE6의 버그를 피해가야 한다면 IE6의 버그를 피해간다는 의도가 코드에 드러나야 한다는 것이다. 그런데 margin을 padding으로 썼다면 이게 버그를 피해간 건지 아닌지 의도가 드러나지 않는다. IE6에서 margin이 항상 버그를 일으키는 것은 아니기 때문이다. 그래서 의도를 모르는 다른 개발자가 주변 레이아웃 배치 때문에 다시 padding을 margin으로 바꿔버려 예상 못한 버그가 발생할 수도 있다. 하지만 이런 경우에 IE CSS Hack을 써서 코딩해두었다면 뭔가 IE6의 문제를 회피하기 위한 것이라는 의도가 드러나게 된다.
width 문제 역시 마찬가지다. 불필요한 엘리먼트를 추가하거나, text-indent 등의 꼼수를 쓰면 박스에서 padding 하나로 쉽게 해결할 수 있는 것을 어렵게 해결해야 한다. 그래서 일단 표준 호환 브라우저 기준으로 레이아웃을 짜고 IE CSS Hack으로 보완하는 것이 버그를 피해가는 방식보다 더 accountable한 코드가 된다.
CSS 속성 순서를 정의하라#
position 관련, display, float, overflow, width, height, margin, padding, border, line-height, font, color, 기타 등등
WikiNamu